<template>
  <div id="photo-stream">
    <el-loading v-if="loading" fullscreen></el-loading>
    <el-alert v-if="error" title="无法获取照片，请稍后再试" type="error" show-icon></el-alert>
    <el-row :gutter="20" class="photo-row">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="(item, index) in photos" :key="index">
        <el-card shadow="hover" style="width: 100%; position: relative;">
          <div style="padding-bottom: 56.25%; position: relative;">
            <img :src="item.imgurl" alt="photo" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" @click="showImage(index)" @load="handleImageLoad(index)">
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-button type="primary" @click="fetchMorePhotos" :loading="loading">加载更多</el-button>
    <el-dialog v-model="dialogVisible" title="查看图片">
      <div class="image-container">
        <el-button @click="previousImage" :disabled="currentIndex === 0" class="arrow-button left-arrow"><i class="el-icon-arrow-left"></i></el-button>
        <img :src="currentImageUrl" alt="large photo" style="width: 100%;">
        <el-button @click="nextImage" :disabled="currentIndex === photos.length - 1" class="arrow-button right-arrow"><i class="el-icon-arrow-right"></i></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}

.arrow-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 40px;

}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

.arrow-button.disabled {
  cursor: not-allowed;
}
</style>


<script>
import axios from 'axios';
import { ElLoading, ElAlert, ElRow, ElCol, ElCard, ElButton, ElDialog } from 'element-plus';

export default {
  components: {
    ElLoading,
    ElAlert,
    ElRow,
    ElCol,
    ElCard,
    ElButton,
    ElDialog
  },
  data() {
    return {
      photos: [],
      page: 1,
      loading: false,
      error: false,
      errorMessage: '',
      dialogVisible: false,
      currentIndex: 0
    };
  },
  computed: {
    currentImageUrl() {
      return this.photos[this.currentIndex]?.imgurl || '';
    }
  },
  methods: {
    async fetchPhotos(count = 12) {
      if (this.loading || this.error) return;
      this.loading = true;
      try {
        const promises = [];
        for (let i = 0; i < count; i++) {
          promises.push(axios.get(`https://api.btstu.cn/sjbz/api.php?lx=meizi&format=json`));
        }
        const responses = await Promise.all(promises);
        const newPhotos = responses.map(response => ({
          imgurl: response.data.imgurl,
          width: response.data.width,
          height: response.data.height
        }));
        this.photos.push(...newPhotos);
        console.log('New photos added:', newPhotos);
        this.page++;
      } catch (error) {
        this.error = true;
        this.errorMessage = '无法获取照片，请稍后再试';
        ElMessage.error(this.errorMessage);
        console.error('Failed to fetch photos:', error);
      } finally {
        this.loading = false;
      }
    },
    handleImageLoad(index) {
      console.log(`Image ${index} loaded`);
      // 这里可以添加逻辑来重新计算容器的高度等，以适应瀑布流布局
    },
    showImage(index) {
      this.currentIndex = index;
      this.dialogVisible = true;
    },
    previousImage() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextImage() {
      if (this.currentIndex < this.photos.length - 1) {
        this.currentIndex++;
      }
    },
    fetchMorePhotos() {
      this.fetchPhotos(12); // 每次加载 6 张图片
    }
  },
  mounted() {
    this.fetchPhotos(12); // 初始加载 6 张图片
  }
};
</script>
